<template>
	<view>
		<nav-bar backState="2000" fontColor="#FFF" :titleCenter="false" type="transparent">
			<view class="icon_setUp" slot="right"  @click="btnIcona(1)"><image class="top_icon" src="../../static/img/editor.png" mode="widthFix"></image></view>
			<view class="icon_setUp" slot="right" @click="btnIcona(0)"><image class="top_icon" src="../../static/img/sett.png" mode="widthFix"></image></view>
		</nav-bar>
		<view class="my_top">
			<view class="userInfo" @click="btnIspersonal">
				<image :src="userInfo.avatar" mode=""></image>
				<view>
					<text>{{userInfo.nickName||'暂无'}}</text>
					<text>未实名认证</text>
				</view>
			</view>
			<view class="info_body">
				<view>
					<text>{{usernum.orderNum}}</text>
					<text>订单</text>
				</view>
				<view>
					<text>22</text>
					<text>今日学习</text>
				</view>
				<view>
					<text>{{usernum.certificateNum}}</text>
					<text>获取证书</text>
				</view>
			</view>
		</view>
		<view class="my_menu">
			<block v-for="(item,index) in menuList" :key='index'>
				<navigator :url="item.url">
					<menuItem :items='item'>
					</menuItem>
				</navigator>
			</block>
			<menuItem :items='aboutUs'>
			</menuItem>
		</view>
	</view>
</template>

<script>
	import menuItem from '@/components/menu_item.vue'
	export default {
		components: {
			menuItem
		},
		data() {
			return {
				menuList: [{
						img: '../../static/img/mycertificate.png',
						name: '实名认证',
						url: '../menu/certificate'
					},
					{
						img: '../../static/img/realnames.png',
						name: '我的证书',
						url: '../menu/my_certificate'
					},
					{
						img: '../../static/img/wrongTitle.png',
						name: "我的错题",
						url: '../subject/myWrongTitle'
					},
					{
						img: '../../static/img/signUp.png',
						name: "我的报名",
						url: '../subject/signUp'
					}
				],
				aboutUs: {
					img: '../../static/img/aboutUs.png',
					name: '关于我们'
				},
				usernum:'',
				ispersonal:uni.getStorageSync('token'),
				userInfo : [],
			}
		},
		onNavigationBarButtonTap(e) {
		     
		},
		onShow() {
			this.getuserInfo();
			this.getorderList();
		},
		methods: {
			btnIspersonal(){
				if(this.ispersonal){
					uni.navigateTo({
						url:'../setup/myBlog'
					})
				}else{
					uni.navigateTo({
						url:'../login/login'
					})
				}
			},
			btnIcona(index){
				if(index === 0){
								 uni.navigateTo({
								 	url:'../setup/modifyPhone'
								 });
								 return;
				};
				if(index === 1){
								 uni.navigateTo({
								 	url:'../setup/myBlog'
								 });
								 return;
				}
			},
			getuserInfo(){
				this.$u.api.getUserInfo().then(res => {
					this.userInfo = res.data
					uni.setStorage({
						key:'USERINFO',
						data:res.data,
					})
				})
			},
			getorderList(){
				this.$u.api.getorderList().then(res => {
					this.usernum = res.data.data[0]
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.my_top {
		width: 100%;
		height: 440rpx;
		background-image: url(../../static/img/my_top.png);
		background-size: 100% 100%;
	}

	.userInfo {
		display: flex;
		align-items: center;
		width: 100%;
		padding-top: 150rpx;
		padding-left: 50rpx;
		>image {
			width: 112rpx;
			height: 112rpx;
			border-radius: 100%;
		}

		>view {
			margin-left: 30rpx;
			display: flex;
			flex-flow: column;
			font-size: 35rpx;

			>text {
				margin: 5rpx 0;
			}
		}
	}

	.info_body {
		width: 90%;
		margin: 0 auto;
		margin-top: 50rpx;
		display: flex;
		padding: 40rpx 0;
		background: #fff;
		border-radius: 10rpx;
		-moz-box-shadow: 0px 0px 4px #333333;
		-webkit-box-shadow: 0px 0px 4px #333333;
		box-shadow: 0px 0px 4px #333333;
		>view {
			flex: 1;
			display: flex;
			flex-flow: column;
			align-items: center;
			>text {
				margin: 10rpx 0;
					&:nth-child(1){
						font-size: 48rpx;
						color: #05B2B5;
					}
					&:nth-child(2){
						font-size: 24rpx;
						color: #999999;
					}
			}
		}
	}

	.my_menu {
		height: 200rpx;
		width: 100%;
		margin-top: 130rpx;
	}
	.top_icon{
		width: 50rpx;
		margin-right: 20rpx;
	}
</style>
